<template>
  <div class="app-container">
    <zhezhao :is-show="isShow" />
    <div class="receivableSheet">
      <el-form ref="form" :model="form" label-width="130px" :inline="true">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="con">
              <p class="mb_20">账户情况</p>
              <div class="df">
                <el-form-item label="可提现:">
                  <span class="font_28">￥{{ Number(accountList.draw_cash) }}</span>
                </el-form-item>
                <div class="f_end">
                  <el-form-item>
                    <p
                      class="tex_but"
                      @click="handleWithdrawal(accountList.draw_cash)"
                    >提现</p>
                  </el-form-item>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="con">
              <p class="mb_20">账户情况</p>
              <div class="df">
                <el-form-item label="累计提现:">
                  <span class="font_28">￥{{ Number(accountList.draw_cash_total) }}</span>
                </el-form-item>
              </div>
            </div>
          </el-col>
          <div class="btn">
            <div class="alignRight">
              <el-button type="primary" @click="toRoutes('cardMange')">银行卡管理</el-button>
            </div>
            <div class="alignRight mt_20">
              <el-button type="primary" @click="toRoutes('cashMessage')">提现明细</el-button>
            </div>
          </div>
        </el-row>
        <div class="divBar" />
        <div class="mt_20">
          <el-row>
            <el-col :span="6">
              <el-form-item label="结算单号">
                <el-input v-model="form.order_sn" placeholder="请输入结算单号" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="名称">
                <el-input v-model="form.name" placeholder="请输入名称" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结算订单类型">
                <el-select v-model="form.type" placeholder="请选择" clearable>
                  <el-option
                    v-for="(item,index) in orderList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结算日期">
                <el-date-picker
                  v-model="form.time"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6" class="alignRight">
              <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleExport">导出</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- </el-form> -->
        </div>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <el-table ref="tableData" :data="tableData" style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="50" align="center" />
        <el-table-column prop="order_sn" label="结算单号" align="center" />
        <el-table-column prop="name" label="名称" align="center" />
        <el-table-column prop="type" label="订单类型" align="center" />
        <el-table-column prop="price" label="实付款" align="center" />
        <el-table-column prop="service_price" label="分佣比例(服务费)" align="center" />
        <el-table-column prop="service_charge" label="结算金额" align="center" />
        <el-table-column prop="username" label="用户姓名" align="center" />
        <el-table-column prop="user_phone" label="手机号码" align="center" />
        <el-table-column prop="status" label="结算状态" align="center" />
        <el-table-column prop="time" label="结算日期" align="center" width="180px" />
        <el-table-column label="操作" fixed="right" align="center" width="100px">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              @click="toRoutes('financeInfo',scope.row.id)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="form.page"
            :page-sizes="page_sizes"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 申请提现金额 -->
    <el-dialog title="申请提现" :visible.sync="dialogFormVisible" width="35%" @close="clear">
      <el-form ref="form1" :inline="true" :model="form1" label-width="150px" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item prop="accountType" label="银行卡类型">
              <el-select
                v-model="form1.accountType"
                filterable
                @change="handleChange"
              >
                <el-option
                  v-for="(item,index) in accountTypeList"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 对私  -->
          <div v-if="form1.accountType=='2'">
            <!-- <el-col :span="24">
                            <el-col :span="24">
                                <el-form-item label="银行卡类型" prop="accountType">
                                    <el-input v-model="form1.accountType" disabled />
                                </el-form-item>
                            </el-col>
                        </el-col>-->
            <el-col :span="24">
              <el-form-item prop="cardId" label="银行卡号">
                <el-select
                  v-model="form1.cardNo"
                  filterable
                  @change="handleChange1"
                >
                  <el-option
                    v-for="(item,index) in cardNumList1"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="开户行名称" prop="bankTitle">
                <el-input v-model="form1.bankTitle" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="持卡人" prop="accountTitle">
                <el-input v-model="form1.accountTitle" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="身份证号" prop="identity">
                <el-input v-model="form1.identity" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="手机号" prop="phone">
                <!-- disabled -->
                <el-input v-model="form1.phone"  disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="验证码" prop="verify">
                <el-input v-model="form1.verify" />
              </el-form-item>
              <el-button
                type="primary"
                :disabled="content.indexOf('s后重新发送')>-1"
                @click="sendmsg(form1.phone)"
              >{{ content }}</el-button>
            </el-col>
          </div>
          <!-- v-else -->
          <div v-else>
            <el-col :span="24">
              <el-form-item prop="cardId" label="银行卡号">
                <el-select
                  v-model="form1.cardNo"
                  filterable
                  @change="handleChange1"
                >
                  <el-option
                    v-for="(item,index) in cardNumList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="开户行名称" prop="bankTitle">
                <el-input v-model="form1.bankTitle" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="开户行支行" prop="branchTitle">
                <el-input v-model="form1.branchTitle" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="企业账户名称" prop="accountTitle">
                <el-input v-model="form1.accountTitle" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="法人姓名" prop="enpUser">
                <el-input v-model="form1.enpUser" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="社会信用代码" prop="identity">
                <el-input v-model="form1.identity" disabled />
              </el-form-item>
            </el-col>
          </div>
          <el-col :span="24">
            <el-form-item label="提现金额" prop="amount">
              <el-input v-model="form1.amount" />
              <span class="red">*</span>
              <span>提现金额必须等于大于20元</span>
            </el-form-item>
          </el-col>
          <el-form-item label=" ">
            <el-button type="primary" @click="confirm('form1')">确认</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 申请提现消息 -->
    <el-dialog
      title="申请提现"
      :visible.sync="dialogMoneyVisible"
      width="468px"
      center
      @close="clearCashMsg"
    >
      <div class="allCenter">
        <span>已提交审核</span>
        <span>3个工作日左右可到账，如遇节</span>
        <span>假日则顺延</span>
        <el-button type="primary" @click="dialogMoneyVisible = false">确定</el-button>
      </div>
    </el-dialog>
    <!-- 提现未添加银行卡 -->
    <el-dialog title="提示" :visible.sync="dialogNoCardVisible" width="30%">
      <div class="allCenter">
        <span>您未添加银行卡，请先添加银行卡</span>
        <el-button type="primary" @click="dialogNoCardVisible = false">确定</el-button>
      </div>
    </el-dialog>
    <!-- 提现金额为0 -->
    <el-dialog title="提示" :visible.sync="dialogNoCashVisible" width="30%">
      <div class="allCenter">
        <span>您当前没有可提现的金额哦~</span>
        <el-button type="primary" @click="dialogNoCashVisible = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import zhezhao from '@/components/CreateMask/index'
import { getList, financeExport } from '@/api/financeList'
import axios from 'axios'
import {
  cardList,
  withdrawalSure,
  getCode,
  verifyCode
} from '@/api/financeListJava'
import commonFn from '@/utils/common'
export default {
  name: 'Financecenter',
  components: { zhezhao },
  data() {
    // 售价
    const priceReg = (rule, value, callback) => {
      const reg = /^\d+(\.\d{1,2})?$/
      if (!reg.test(value)) {
        return callback(new Error('请输入正确的数字'))
      } else if (Number(value) < 20) {
        return callback(new Error('提现金额不能小于20元'))
      } else {
        callback()
      }
    }
    return {
      form: {
        order_sn: '',
        name: '',
        time: '',
        type: '',
        page: 1,
        size: 10
      },
      orderList: [
        { name: '全部', value: '' },
        { name: '服务订单', value: 1 },
        { name: 'Plus会员卡订单', value: 2 }
      ],

      tableData: [],
      accountList: {
        draw_cash: 0,
        draw_cash_total: 0
      },
      tableLoading: true,
      page_sizes: [10, 30, 50, 100], // 每页显示个数
      page_totals: 60, // 总条目数,
      dialogFormVisible: false,
      form1: {
        accountType: '',
        cardNo: '',
        bankTitle: '',
        accountTitle: '',
        amount: '',
        phone: '',
        cardId: '',
        verify: '',
        identity: '',
        enpUser: ''
        // enpCode: ''
      }, // 提现
      accountTypeList: [
        { name: '对公', value: '1' },
        { name: '对私', value: '2' }
      ], // 账户类型
      // cardList: [], // 银行卡类型
      cardNumList: [], // 银行卡号
      cardNumList1: [], // 对私银行卡号测试
      dialogMoneyVisible: false,
      dialogNoCardVisible: false,
      dialogNoCashVisible: false,
      content: '发送验证码',
      listData: [],
      canClick: true, // 添加canClick
      totalTime: 60,
      isShow: true,
      flag: true,
      flag1: true,
      listCount: '',
      // 提现金额不能小于20
      rules: {
        accountType: [
          {
            required: true,
            message: '请选择账户类型',
            trigger: 'change'
          }
        ],
        cardId: [
          {
            required: true,
            message: '请选择银行卡号',
            trigger: 'change'
          }
        ],
        bankTitle: [
          {
            required: true,
            message: '请输入开户行名称',
            trigger: 'blur'
          }
        ],
        accountTitle: [
          {
            required: true,
            message: '请输入企业账户名称',
            trigger: 'blur'
          }
        ],
        branchTitle: [
          {
            required: true,
            message: '请输入开户行支行',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }
        ],
        verify: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ],
        amount: [
          {
            required: true,
            validator: priceReg,
            trigger: 'blur'
          }
        ],
        identity: [
          {
            required: true,
            message: '请输入身份证号码',
            trigger: 'blur'
          }
        ],
        enpUser: [
          {
            required: true,
            message: '请输入法人姓名',
            trigger: 'blur'
          }
        ]
      }
    }
  },

  watch: {
    'form1.accountType'(e) {
      this.$refs.form1.clearValidate()
      this.form1 = { accountType: e, amount: this.accountList.draw_cash }
    }
  },

  inject: ['reload'],
  mounted() {
    this.getSource()
    this.getList(this.form)
    this.handleCardList()
  },
  methods: {
    // 获取tablel列表
    getList(e) {
      getList(e)
        .then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data.data
            this.accountList = res.data.account
            this.page_totals = res.data.data.total
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
          this.tableLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.tableLoading = false
        })
    },
    // 路由跳转
    toRoutes(e, id) {
      const route = { name: e, query: { id: id }}
      this.$router.push(route)
    },
    handleCardList() {
      const datas = {
        auditStatus: '1',
        pageNum: 1,
        pageSize: 1000,
        // accountType: "2"
        accountType: this.form1.accountType
      }
      // 查询银行卡列表
      cardList(datas)
        .then(res => {
          if (res.data.code == 0) {
            const resData = res.data.data.list
            this.listCount = res.data.data.count
            // this.form1.accountType = res.data.data.list
            this.listData = res.data.data.list
            const arr = []
            resData.forEach(e => {
              arr.push({
                name: e.cardNo,
                value: e.cardId
              })
              // this.form1.accountType =
              //     e.accountType == 2 ? "对私账户" : "";
            })
            if (this.form1.accountType == '1') {
              this.cardNumList = arr
            } else {
              this.cardNumList1 = arr
              // this.cardNumList = arr;
            }
            this.form1.amount = this.accountList.draw_cash
            // arr.unshift({
            //     name: "请选择银行卡",
            //     value: ""
            // });
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
        })
        .catch(err => {
          this.errorStatus(err)
        })
    },
    // 提现详情
    handleWithdrawal(e) {
      if (!this.listCount) {
        this.dialogNoCardVisible = true
      } else if (Number(e) > 0) {
        this.dialogFormVisible = true
        this.handleCardList()
      } else {
        this.dialogNoCashVisible = true
      }
    },
    handleSure() {
      const datas = {
        cardId: this.form1.cardId,
        amount: String(this.form1.amount)
      }
      withdrawalSure(datas)
        .then(res => {
          if (res.data.code == 0) {
            this.flag = true
            this.dialogFormVisible = false
            setTimeout(() => {
              this.dialogMoneyVisible = true
            }, 1000)
          } else {
            this.flag = true
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
        })
        .catch(err => {
          this.flag = true
          this.errorStatus(err)
        })
    },
    // cardBlur() {},
    // 提现确定
    confirm(e) {
      if (this.form1.accountType == '1' && this.flag) {
        this.$refs[e].validate(valid => {
          if (valid) {
            this.flag = false
            this.handleSure()
          } else {
            this.$message({
              message: '有必填项没填，不能提交咯',
              type: 'warning'
            })
            // return false;
          }
        })
      }
      if (this.form1.accountType == '2' && this.flag) {
        const datas = {
          phone: String(this.form1.phone),
          verify: String(this.form1.verify)
        }
        this.$refs[e].validate(valid => {
          if (valid) {
            if (this.flag) {
              this.flag = false
              verifyCode(datas)
                .then(res => {
                  if (res.data.code == 0) {
                    this.handleSure()
                  } else {
                    this.flag = true
                    this.$message({
                      showClose: true,
                      message: res.data.msg,
                      type: 'warning'
                    })
                  }
                })
                .catch(err => {
                  this.flag = true
                  this.errorStatus(err)
                })
            }
          } else {
            this.$message({
              message: '有必填项没填，不能提交咯',
              type: 'warning'
            })
            // return false;
          }
        })
      }
    },
    clearCashMsg() {
      this.reload()
    },
    // 发送验证码
    sendmsg(e) {
      if (
        this.form1.cardNo &&
                this.form1.bankTitle &&
                this.form1.accountTitle &&
                this.form1.phone &&
                this.form1.identity
      ) {
        const datas = { phone: String(e), type: '1001', extra: '[]' }
        getCode(datas)
          .then(res => {
            if (res.data.code == 0) {
              if (!this.canClick) return
              this.canClick = false
              this.content = this.totalTime + 's后重新发送'
              const timer = setInterval(() => {
                this.totalTime--
                this.content = this.totalTime + 's后重新发送'
                if (this.totalTime < 0) {
                  clearInterval(timer)
                  this.content = '重新发送验证码'
                  this.totalTime = 60
                  this.canClick = true // 这里重新开启
                }
              }, 1000)
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: 'warning'
              })
            }
          })
          .catch(err => {
            // console.log(err);
            this.errorStatus(err)
          })
      } else {
        this.errorStatus(
          '请将银行卡号、开户行名称、持卡人、手机号码，身份证号等填写完整后在点击获取验证码'
        )
      }
    },
    // 门店审核
    getSource() {
      const source = sessionStorage.getItem('source')
      const status = sessionStorage.getItem('check_status')
      if (status == 3) {
        this.isShow = false
      } else {
        this.isShow = true
      }
    },
    // 查询
    handleSearch() {
      this.form.page = 1
      this.getList(this.form)
    },
    // 导出
    handleExport() {
      financeExport({
        order_sn: this.form.order_sn,
        name: this.form.name,
        time: this.form.time,
        type: this.form.type,
        page: this.form.page,
        size: this.form.size
      })
        .then(res => {
          commonFn.downFile('财务中心列表', res)
        })
        .catch(err => {
          this.errorStatus(err.msg)
        })
    },
    clear() {
      this.dialogFormVisible = false
      this.form1 = {
        accountType: '',
        cardNo: '',
        bankTitle: '',
        accountTitle: '',
        amount: '',
        phone: '',
        cardId: ''
      }
      this.$refs.form1.clearValidate()
    },
    // 银行卡类型变化
    handleChange() {
      // this.getList(this.form);
      this.handleCardList()
      this.$refs.form1.clearValidate()
    },
    // 银行卡号
    handleChange1(e) {
      this.form1.cardId = e
      const datas = [...this.listData]
      const newList = datas.find(e => {
        return e.cardId == this.form1.cardId
      })
      this.form1.bankTitle = newList.bankTitle
      this.form1.accountTitle = newList.accountTitle
      this.form1.phone = newList.phone
      this.form1.branchTitle = newList.branchTitle
      this.form1.identity = newList.identity
      this.form1.enpUser = newList.enpUser
      // this.form1.enpCode = newList.enpCode
      // if (this.form1.accountType == "1") {
      //     this.form1.bankTitle = newList.bankTitle;
      //     this.form1.accountTitle = newList.accountTitle;
      //     this.form1.branchTitle = newList.branchTitle;
      // } else {
      //     this.form1.bankTitle = newList.bankTitle;
      //     this.form1.accountTitle = newList.accountTitle;
      //     this.form1.phone = newList.phone;
      //     this.form1.branchTitle = newList.branchTitle;
      //     this.form1.identity = newList.identity;
      // }
      // this.form1.amount = this.accountList.draw_cash;
    },

    // 每页显示条数
    handleSizeChange(val) {
      this.form.size = val
      this.getList(this.form)
    },
    // 当前页
    handleCurrentChange(val) {
      this.form.page = val
      this.getList(this.form)
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      })
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, 'success')
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, 'error')
    }
  }
}
</script>
<style scoped>
.con {
    border-radius: 4px;
    border: 1px solid #cacaca;
    /* height: calc(100vh - 600px); */
    /* min-height: 100px; */
    min-height: 180px;
    margin-bottom: 20px;
    box-sizing: border-box;
}
.mb_20 {
    background: #ff8728;
    height: 40px;
    line-height: 40px;
    text-indent: 20px;
    color: #fff;
    border-bottom: 1px solid #cacaca;
}
.font_28 {
    font-size: 20px;
    color: #333;
    font-weight: 500;
}
.df {
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
}
.f_end {
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;
}
.tex_but {
    width: 70px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #cacaca;
    border-radius: 20px;
    font-size: 12px;
    color: #666;
    margin: -20px 0px;
}
.mt_20 {
    margin-top: 20px;
}
.alignRight {
    width: 100%;
    text-align: right;
}
.allCenter {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 25px;
}
.allCenter > .el-button {
    margin-top: 20px;
}
.auto {
    margin: auto;
}

.btn {
    margin-right: 30px;
}
/* 分页样式 */
.pagesCon {
    margin-top: 20px;
    text-align: right;
}
.red {
    color: red;
}
</style>
